<template>
    <div class="newObjectList">
        <div class="container">
            <div class="handle-box">
                <div class="title">进行中项目</div>
                <el-button type="primary" class="titleBtn1">
                  <a href="/cost/excel/project/ing">导出</a>
                </el-button>
            </div>
            <div class="project">
                <div class="titleName">
                    <div class="projectId">
                        <div class="titles" style="color:#333">项目ID</div>
                        <div class="names">{{ projectInfo.projectid }}</div>
                    </div>
                    <div class="projectName">
                        <div class="titles" style="color:#333;">项目名称</div>
                        <el-tooltip  popper-class="atooltip"  placement="top">
                            <div slot="content" style="width:800px">{{projectInfo.projectname}}</div>
                        <div
                            class="names"
                            style="white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;"
                        >
                            {{ projectInfo.projectname }}
                        </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="projectContent">
                    <el-row :span="24" border>
                        <el-col :span="8" class="colList">
                            <div>登录密码</div>
                            <div>123456</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>合同总产值</div>
                            <div>{{ projectInfo.contractvalue }}万</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>所属事业部</div>
                            <div
                                style="white-space: nowrap;
                                      overflow: hidden;
                                      text-overflow: ellipsis;"
                            >
                                {{ projectInfo.deptname }}
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>工期</div>
                            <div class="items1">{{ projectInfo.period }}个月</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>关联ID</div>
                            <div class="items1">{{ projectInfo.userId }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            
                            <div>类型</div>
                            <el-tooltip class="itemtooltip"  :content="projectInfo.category " placement="top-end">
                            <div class="items1">{{ projectInfo.category }}</div>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>开工时间</div>
                            <div>{{ projectInfo.startdate }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>区域（省）</div>
                            <div>{{ projectInfo.region }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>实施状态</div>
                            <div class="items1">{{ projectInfo.state | isStatus }}</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24" style="width:841px;">
                        <el-col :span="24">
                            <span>操作</span>
                            <div class="textBtn">
                                <el-button type="text" @click="handleDecompose()">细化分解表</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!-- 项目细化分解表 -->
        <el-dialog title="项目细化分解表" :visible.sync="decomposeVisible" width="70%" custom-class="output" :lock-scroll="false">
            <div class="tableBox">  
            <div class="selectMonthBox">
                <el-button
                    class="monthItem"
                    :class="{ timeChecked: montClick == index }"
                    @click="isCheckedmonth(item, index)"
                    v-for="(item, index) in monthList"
                    :key="index"
                >
                    {{ item.month }}
                </el-button>
                <el-button
                    class="titleBtn"
                    type="primary"
                ><a href="/cost/excel/project/decomposition">导出</a></el-button>
               
            </div>
            <el-table
                :data="specifyList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{ children: 'modelList', hasChildren: 'hasChildren' }"
            >
                <el-table-column label="分类名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">
                            {{
                            scope.row.oneLevelName || scope.row.twoLevelName || scope.row.threeLevelName
                            }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="预算金额">
                    <template slot-scope="scope">
                        <span>{{ scope.row.budgetAmount }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="已使用">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isUse }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上报人" v-if="montClick == 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reportPer }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="本月费用" v-if="montClick != 0">
                    <template slot-scope="scope">
                        <span>{{scope.row.monthCost}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="剩余" v-if="montClick != 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.over }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="最后上报时间" v-if="montClick == 0">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reportTime }}</span>
                    </template>
                </el-table-column>
                
            </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {projectdetail, projectgetMonthlyReportTitleList, projectspecifyList } from '@/api/index.js';
import { throttle } from '@/utils/tools.js';
export default {
    data() {
        return {
            decomposeVisible: false,//细化分解弹窗状态
            projectInfo: {},//项目详情信息
            projectSpecifyList: [], //细化分解列表
            montClick: 0, //当前选择的月份
            monthList: [], //月报列表
            specifyList: [], //细化分解项列表
           
        };
    },
    created() {
      // 获取项目详情
        this.getDoingProjectList();
    },
    filters: {
        isStatus(data) {
            if (data === 0) {
                return '新项目';
            } else if (data === 1) {
                return '进行中';
            } else if(data===2) {
                return '已完成';
            }
            else if(data===3) {
                return '待验收';
            }
            else if(data===4) {
                return '停工';
            }
            else if(data===5) {
                return '已验收';
            }
        },
        fliterMessage(message) {
            if (message.length > 10) {
                return message.substring(0, 10) + '...';
            }
        }
    },
    methods: {
        //点击细化分解表操作
        handleDecompose() {
            this.getSpecifyList();
            this.getMonthlyReportTitleList(this.projectInfo.projectid)
            this.decomposeVisible = true;
        },
        // 获取月报标题列表
        getMonthlyReportTitleList(id) {
            projectgetMonthlyReportTitleList({ projectid: id }).then((res) => {
                if (res.code == 200) {
                    this.monthList = res.result.monthTitleList;
                    this.monthList.unshift({ month: '汇总' });
                    // 模拟点击汇总
                    this.getSpecifyList('汇总');
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        //切换月份
        isCheckedmonth(obj, index) {
            this.montClick = index;
            if (typeof obj === 'string') {
            } else this.getSpecifyList(obj.month);
        },
        //获取项目部-进行中项目-项目详情信息
        getDoingProjectList() {
          projectdetail({projectid:localStorage.getItem('projectid')}).then(res => {
            if(res.code==200){
              this.projectInfo = res.result
            }
          })
        },
        // 获取成本细化分解表
        getSpecifyList(month) {
            this.MonthlyReport = 1;
            let params = {
                projectid: this.projectInfo.projectid,
                type: 1 // 进行中项目
            };
            if (month !== '汇总') params.month = month;
            projectspecifyList(params).then((res) => {
                if (res.code === 200) {
                    let data = res.result;
                    this.specifyList = data.specifyList || [];
                } else this.$message.error(res.message);
            });
        },  
    }
};
</script>

<style lang="scss" scoped>
.el-tooltip__popper {
  width: 800px !important;
}
.container {
    min-height: 600px;
    padding-left: 30px;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}
.titleBtn {
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    width: 109px;
    height: 35px;
    text-align: center;
    margin-left: 66px;
}
.titleBtn a{
  color:white;
}

.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    width: 90px;
    height: 35px;
    margin-left: 25px;
    font-size: 16px;
}
.titleBtn1 a {
    color: #004fab;
}
.project {
    max-width: 2000px;
    padding-left: 30px;
    .titleName {
        height: 80px;
        width: 1300px;
        line-height: 36px;
        font-size: 20px;
        display: flex;
        align-items: center;
        .projectId {
            margin-right: 60px;
            width:350px;
        }
        .projectId,
        .projectName {
            .titles{
                float: left;
                margin-right: 20px;
            }
            div:nth-child(2) {
                color: #666;
                margin-left: 28px;
            }
        }
        .projectName{
            max-width: 800px;
            word-wrap: break-word;
        }
    }
}
.projectContent {
    width: 840px;
    cursor: pointer;
    /deep/ .el-col {
        height: 44px;
        line-height: 44px;
        color: #333;
        font-size: 16px;
        padding-left: 22px;
        background: rgba(184, 216, 255, 0.05);
        border: 1px solid rgba(184, 216, 255, 1);
        overflow: hide;
        margin-top: -1px;
        margin-left: -1px;
        display: flex;
        align-items: center;
    }
    .colList {
        div:nth-child(1) {
            flex: 2;
            color: #333;
            font-weight: 500;
        }
        div:nth-child(2) {
            flex: 3;
            font-size: 14px;
            font-weight: 400;
            color: #666;
        }
    }
    .textBtn {
        margin-left: 65px;
    }
}
.newObjectList >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
#table {
    width: 100%;
    border-collapse: collapse;
}
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;
     font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    height: 40px;
    text-overflow: ellipsis;
    max-width: 200px;
    position: relative;
}
.tableBox {
    min-height: 300px;
}
// .doingObject/deep/.el-dialog__body {
//     max-height: 800px;
//     min-height: 563px;
//     overflow-y: scroll;
// }
// .doingObject/deep/.el-progress-bar__outer {
//     width: 90px;
// }
// .progress {
//     width: 100%;
//     border: 1px solid rgba(184, 216, 255, 1);
//     border-top: none;
//     box-sizing: border-box;
//     height: 60px;
//     padding: 0 20px;
//     div {
//         width: 477px;
//         display: flex;
//         height: 60px;
//         align-items: center;
//         span {
//             width: 80px;
//         }
//     }
// }


.items1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tdItem/deep/.el-progress-bar {
    width: 144px;
    
}
.el-progress{
    display: flex;
    align-items: center;
}
.project/deep/.el-col-8 {
    width: 281px;
    height: 44px;
}
.progress/deep/.el-progress__text {
    margin-left: 22px !important;
    word-wrap:break-word;
}
.selectMonthBox{
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #004fab;
    margin-bottom:30px;
    padding-left:50px;
    box-sizing: border-box;
    flex-wrap: wrap;
    .monthItem{
        margin-top:5px;
        width:93px;
height:35px;
background:rgba(255,255,255,1);
border-radius:2px;
border:1px solid rgba(198,203,212,1);
text-align: center;
margin-right: 15px;
font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
}
.timeChecked{
    background:rgba(0,79,171,1) !important;
    color:#fff !important;
    border:1px solid rgba(0,79,171,1) !important;
}
.reviewBoxnext{
    display: flex;
    p:nth-child(1) {
        width: 182px;
        margin-right: 37px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
    p:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
}
.itemtooltip{
    width: 600px;
}
.calIcon{
    position:absolute;
    text-align: center;
    top:10px;
    right:5px;
    margin-left: 10px;;
    border:1px solid #214a8f;
    width:16px;
    height:16px;
    img{
        width:12px;
        height:12px;
    }
}

</style>
